<template>
    <div>
        <v-dialog
            title="收款"
            :show.sync="dialogVisible"
            :destroy-on-close="true"
            @beforeClose="beforeClose"
            width="1200px">
            <div class="card-box">
                <div class="data-title">基本信息</div>
                <div><span style="font-size: 16px ; text-blink: #000">物业名称{{form.projectName}}</span>
                </div>
                <el-form>
                    <div class="info-list mb20">
                        <dl>
                            <dt>建筑面积</dt>
                            <dd>{{form.rentContract.buildingArea}}</dd>
                        </dl>
                        <dl>
                            <dt>月租金(元)</dt>
                            <dd>{{form.rentContract.rentAmount}}</dd>
                        </dl>
                        <dl>
                            <dt>合同期限</dt>
                            <dd>{{form.rentContract.startDate}}至{{form.rentContract.endDate}}</dd>
                            <dd><el-button  type="text" class="viewContract" @click.stop="showData(form)">查看合同</el-button></dd>
                        </dl>
                        <dl>
                            <dt>合同总金额(元)</dt>
                            <dd>{{form.accumulatedAmountReceivedCount}}</dd>
                        </dl>
                        <dl>
                            <dt>累计已收款金额(元)</dt>
                            <dd>{{form.accumulatedAmountReceived}}<a  type="text" style="margin-left: 120px;color: #1b68e8;cursor:pointer"  @click.stop="showReceivableMoneyData(form)">查看</a></dd>
                        </dl>
                        <dl>
                            <dt>累计剩余余款(元)</dt>
                            <dd>{{form.accumulatedAmountReceivedCount-form.accumulatedAmountReceived}}</dd>
                        </dl>
                        <dl>
                            <dt>付款人</dt>
                            <dd>{{form.rentContract.customerName}}</dd>
                        </dl>
                    </div>
                </el-form>
                <!--<div class="data-title">税率/级</div>
                <el-form >
                    <el-form-item label="税率：">
                        <el-checkbox-group style="display: inline-block" v-model="checkbox">
                            <el-checkbox v-for="(item,index) in taxesList" :key="index" :label="item.taxesName" v-if="item.taxesName != '城镇土地使用税'">
                                {{item.taxesName}}({{item.taxes}}%)
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item prop="TaxAmount" label="税级(城镇土地使用税)：">
                        <el-radio-group style="display: inline-block;width: 15%" v-model="radio" v-for="(item,index) in taxes" :key="index">
                            <el-radio :label="item" @change="radioChange($event, item, index)">{{index+1}}级({{item}}元)</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="税额(税额=税率*本次收款金额 + 税级)：">
                        <el-input :disabled="true" v-model="TaxExamples"></el-input>
                        <el-input :disabled="true" v-model="TaxAmount.toFixed(2)"></el-input>
                    </el-form-item>
                </el-form>-->
                <div class="data-title">收款信息</div>
                <el-form ref="editForm" :model="form" class="form-wrap" size="small" :rules="rules">
                    <el-form-item label="本次应收款金额" prop="collectionAmount" disabled="disabled">
                        <el-input disabled="disabled"  v-model="form.amountOfReceivables"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="collectionAmount">
                        <dl>
                            <dt>收款费用周期</dt>
                            <dd v-for="item in form.consolidatedCollectionFeeCycle" :key="item.value">{{item}}</dd>
                        </dl>

                    </el-form-item>
                    <el-form-item label="本次收款金额(元)" prop="collectionAmount">
                        <el-input disabled="disabled"   v-model="form.amountOfReceivables"></el-input>
                    </el-form-item>
                    <el-form-item label="收款日期" prop="collectionDate">
                        <el-date-picker
                            v-model="form.collectionDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            placeholder="税率更新时间"
                        ></el-date-picker>
                    </el-form-item>

                    <el-form-item label="收款备注" class="full" prop="collectionRemarks">
                        <el-input v-model="form.collectionRemarks" maxlength="200" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="foot">
            <el-button @click="handleCancel">取 消</el-button>
            <el-button @click="commit">提 交</el-button>
          </span>
        </v-dialog>
        <contract-view ref="contractView"></contract-view>
        <show-receivable ref="showReceivable"></show-receivable>
    </div>
</template>

<script>
import engineerList from '@/components/engineer-list'
import {addObj,getConsolidatedCollection} from '../../../api/finance-collection-actual'
import {getTaxesList} from '../../../api/finance-manage-taxes'
import BaseLoad from '@/assets/vue-mixin/BaseLoad'
import showReceivable from '../edit/show-receivable'
import contractView from "@/views/rent/contract/view.vue"
import {mapState} from 'vuex'
export default {
    mixins: [BaseLoad],
    components: { engineerList,showReceivable,contractView},
    // watch: {
    //     'checkbox': function () {
    //         this.sum = ''
    //         this.taxesSumCheck = 0
    //         this.taxesList.map(item => {
    //             for (let i in this.checkbox) {
    //                 if (item.taxesName === this.checkbox[i]) {
    //                     if (this.checkbox.length === 0) {
    //                         this.TaxAmount = 0
    //                         this.TaxExamples = ''
    //                     } else if (this.checkbox.length === 1) {
    //                         this.taxesSumCheck = Number(item.taxes)
    //                         this.sum = item.taxes + '%,'
    //                     } else {
    //                         this.taxesSumCheck += Number(item.taxes)
    //                         this.sum += item.taxes + '%,'
    //                     }
    //                 }
    //             }
    //         })
    //         if (this.checkbox.length === 1) {
    //             if (this.radio === '') {
    //                 this.TaxAmount = Number((this.form.amountOfReceivables * this.taxesSumCheck / 100))
    //             } else {
    //                 this.TaxAmount = Number((this.form.amountOfReceivables * this.taxesSumCheck / 100)) + Number(this.taxesSumRadio)
    //             }
    //         } else {
    //             this.TaxAmount = Number((this.form.amountOfReceivables * this.taxesSumCheck / 100)) + Number(this.taxesSumRadio)
    //         }
    //         this.TaxExamples = this.sum  + this.taxesIndex
    //         this.receivables.map(item => {
    //             this.Num.push(Number((item * this.taxesSumCheck / 100)) + Number(this.taxesSumRadio))
    //             if (this.Num.length > 2) {
    //                 this.Num = this.Num.slice(2,4)
    //             }
    //         })
    //     }
    // },
    data() {
        var validateCollectionAmount=(rule, value, callback) => {
            if(value>this.form.receivableMoney){
                callback(new Error('收款金额不能大于应收金额'));
            }
        }
        return {
            TaxAmount: 0,
            TaxExamples: '',
            sum: '',
            radio: '',
            Num: [],
            taxesIndex: '',
            taxesSumCheck: 0,
            taxesSumRadio: 0,
            checkbox: [],
            taxesList: [],
            taxes:[],
            formData: {},
            input: '',
            value: '',
            area: [],

            form: {
                rentContract:{},
                accumulatedAmountReceived:'',
                accumulatedSurplus:'',
                amountOfReceivables:'',
                consolidatedCollectionFeeCycle:[],
                contractId:'',
                receivableId:'',
                taxes:'',
                taxAmount:'',
                collectionRemarks:'',
            },
            contractId:'',
            receivableId: '',
            dialogVisible: false,
            isEdit: false,
            rules: {
                // collectionAmount: [
                //     {required: true, message: '请输入本次收款金额', trigger: 'blur'},
                //     { validator: validateCollectionAmount, trigger: 'blur' }
                //     ],
                TaxAmount: [{required: true, message: '请选择税级', trigger: 'blur'}],
                collectionDate: [{required: true, message: '请输入收款日期', trigger: 'blur'}],
            },
            receivables: []
        }
    },
    methods: {
        // radioChange(value, item, index){
        //     this.taxesSumRadio = Number(value)
        //     this.taxesIndex = Number(index + 1) + '级'
        //     this.TaxAmount = Number((this.form.amountOfReceivables * this.taxesSumCheck / 100)) + Number(this.taxesSumRadio)
        //     this.TaxExamples = this.sum + this.taxesIndex
        //     this.Num = this.receivables.reduce((total,item) => {
        //         return total.concat(Number((item * this.taxesSumCheck / 100)) + Number(this.taxesSumRadio))
        //     },[])
        // },
        show(contractId, receivableId) {
            this.dialogVisible = true
            setTimeout(() => {
                this.isEdit = false
                this.$refs.editForm.resetFields()
                if (receivableId) {
                    this.isEdit = true
                    //this.form = item
                }
                // getTaxesList("").then(resp => {
                //     this.taxesList = resp.data.data;
                //     this.taxes = this.taxesList[5].taxes.split(',')
                // })
                getConsolidatedCollection(contractId,receivableId).then(resp => {
                    this.form = resp.data.data;
                    this.receivables = resp.data.data.receivables
                })
                this.receivableId = receivableId.join(',')
                this.contractId = contractId

            }, 200)
        },
        //查看(累计已收款金额)
        showReceivableMoneyData(item){
            item.rentContractId = this.contractId
            //console.log(item)
            this.$refs.showReceivable.show(item)
        },
        //查看合同
        showData(row) {
            this.$refs.contractView.show(this.contractId);
            //this.$router.push({path: "/wy-rent/contract/view?id=" + this.contractId});
        },
        commit() {
            this.$refs.editForm.validate(valid => {
                if (valid) {
                    //if(this.radio != 0){
                        this.form.taxes = this.TaxExamples
                        this.form.taxAmount = this.TaxAmount
                        this.form.receivableId = this.receivableId
                        this.form.receivables = this.Num
                        addObj(this.form).then(resp => {
                            if (resp.data.data) {
                                this.suc('添加成功')
                                this.dialogVisible = false
                                this.$emit('resetList')
                            } else {
                                this.err('添加失败')
                            }
                        })
                    // }else{
                    //     this.err('请选择税级')
                    // }
                }
            })
        },
        handleCancel() {
            // this.radio = ''
            // this.checkbox = []
            // this.$nextTick(() => {
            //     this.TaxExamples = ''
            //     this.TaxAmount = 0
            // })
            this.dialogVisible = false
        },
        beforeClose(done) {
            done()
        }
    }
}
</script>

<style lang='scss' scoped>

@include data-title();
@include info-list(3);
@include formWrap(3);
</style>
